<template>
  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <!-- 标签内部滚动内容（可视滚动区域）-->
  <div class="div-top" v-if="isShow">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="pullLoading" success-text="刷新成功~" @refresh="onRefresh">
      <!-- 轮播图 -->
      <Swiper :banner="bannerList"></Swiper>
      <!-- 首页推荐tab文章列表（上拉加载更多） -->
      <van-list :immediate-check="false" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
        @load="onLoad">
        <!-- 文章列表样式 -->
        <article-list v-for="(item, index) in list" :textInfo="item" :key="item.id"></article-list>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import Swiper from '../../../components/swipe/Swiper.vue'
import ArticleList from '../../../components/articleList/ArticleList.vue'

import { reactive, ref, onMounted } from 'vue';

import { homeSwiper, getRecArts, getNewRecArts } from '../../../network/home.js'
import { Toast } from 'vant';

// 请求首页推荐轮播图数据
const bannerList = reactive([])
// 文章列表数据
const list = reactive([]);
const isShow = ref(false)
onMounted(async () => {
  try {
    const { data: bannerData } = await homeSwiper()
    bannerList.push(...bannerData)
    const { data: articleData } = await getRecArts()
    list.push(...articleData)
  } catch (err) {
    Toast.fail(err.message)
  }
  setTimeout(() => {
    isShow.value = true
  }, 500)
})

// 触底加载更多
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    getRecArts().then(res => {
      list.push(...res.data)
      loading.value = false;
    })
  }, 1000)
}

// 下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    // 添加新文章
    getNewRecArts().then(res => {
      // 将最新文章添加到list头部
      list.unshift(...res.data)
    })
    pullLoading.value = false;
  }, 1000);
}
</script>

<style scoped>
/* .div-top {
  height: calc(100vh - 139px);
  overflow: scroll;
  margin-top: 45px;
} */
</style>
